<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>tap选项卡</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<script>
			$(function(){
				$("#tap1").click(function(){
					$("#tap1").css("background-color","yellow").siblings().css("background-color","#939393");
					$("#big").html("tap文字内容1");
				});
				$("#tap2").click(function(){
					$("#tap2").css("background-color","yellow").siblings().css("background-color","#939393");
					$("#big").html("tap文字内容2");
				});
				$("#tap3").click(function(){
					$("#tap3").css("background-color","yellow").siblings().css("background-color","#939393");
					$("#big").html("tap文字内容3");
				});
			});
			
		</script>
		<style>
			ul{
				/* border: 1px solid red; */
				height: 50px;
				width: 300px;
				margin: 0;
				padding: 0;
			}
			ul li{
				list-style: none;
				float: left;
				/* border: 1px solid red; */
				width: 80px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				margin-right: 15px;
				background-color: #939393;
			}
			div{
				/* border: 1px solid red; */
				height: 500px;
				width: 800px;
				background-color: yellow;
				line-height: 500px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<ul>
			<li id="tap1">tap01</li>
			<li id="tap2">tap02</li>
			<li id="tap3">tap03</li>
		</ul>
		<div id="big">tap文字内容1</div>
	</body>
</html>